<template>
  <div class="ele-body">
    <el-row class="title">
      <el-card shadow="never" style="border-left: 3px solid var(--color-primary);">
        <div style="display: flex;justify-content: space-between;align-items: center">
          <div style="font-weight: bolder;font-size: 18px;">配件详情</div>
          <div>
            <el-button type="primary" icon="el-icon-edit" @click="onEdit" :loading="loading">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="onDel">删除</el-button>
          </div>
        </div>
      </el-card>
    </el-row>
    <el-row :gutter="15" class="content">
      <el-col :span="6">
        <el-card shadow="never" v-loading="loading" class="content-right">
          <template #header>
            <div
              style="display: flex;justify-content: space-between;align-items: center;font-weight: 550;margin-left: 4px">
              <div style="flex:1;overflow: auto;word-break: break-all;color: rgba(0 0 0 / .7)">
                编号：{{ info.c_number || '' }}
              </div>
            </div>
          </template>
          <template>
            <div class="info-item">
              <span>名称：</span>
              <span>{{ info.name || '' }}</span>
            </div>
            <div class="info-item">
              <span>类别：</span>
              <span>{{ info.type || '' }}</span>
            </div>
            <div class="info-item">
              <span>规格型号：</span>
              <span>{{ info.model || '' }}</span>
            </div>
            <div class="info-item">
              <span>单位：</span>
              <span>{{ info.uom || '' }}</span>
            </div>
            <div class="info-item">
              <span>销售价：</span>
              <span>{{ info.sale_price || '' }}</span>
            </div>
            <div class="info-item">
              <span>成本价：</span>
              <span>{{ info.out_price || '' }}</span>
            </div>
            <div class="info-item">
              <span>创建日期：</span>
              <span>{{ info.create_time || '' }}</span>
            </div>
            <div class="info-item">
              <span>创建人：</span>
              <span>{{ info.create_user_name || '' }}</span>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="never" class="content-left" v-loading="loading">
          <el-tabs v-model="activeName">
            <el-tab-pane label="库存信息" name="first">
              <Stock :data="info.inventory_detail"/>
            </el-tab-pane>
            <el-tab-pane label="使用记录" name="second">
              <Record :data="info.use_detail"/>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <AddDialog @reload="handleQueryInfo(id)" ref="addDialogRef" :current="info"/>
    <DelDialog ref="delDialogRef" :id="id" :name="info.name"/>
  </div>
</template>

<script>
import AddDialog from "@/views/bom/accessories/components/add-dialog.vue";
import Record from "@/views/bom/accessories/info/components/record.vue";
import Stock from "@/views/bom/accessories/info/components/stock.vue";
import DelDialog from "@/views/bom/accessories/components/del-dialog.vue";

export default {
  components: {
    Stock,
    Record,
    AddDialog,
    DelDialog
  },
  data() {
    return {
      activeName: 'first',
      loading: false,
      id: '',
      info: {},
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.handleQueryInfo(this.id)
  },
  methods: {
    onEdit() {
      this.$refs.addDialogRef.onActive('put')
    },
    onDel() {
      this.$refs.delDialogRef.visible = true
    },
    async handleQueryInfo(id) {
      this.loading = true
      try {
        const res = (await this.$http.get(`/part_categories/${id}`)).data
        res.success ? this.info = res.data : this.$message.error(this.msg)
        this.loading = false
      } catch (err) {
        console.log(new Error(err))
      }
    }
  },
}
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 15px;
}


.info-item {
  padding: 8px 4px;
  font-weight: 500;
  display: flex;
  align-items: center;

  > span:nth-child(1) {
    flex: 3;
  }

  > span:nth-child(2) {
    flex: 7;
  }
}

.content-right {
  height: calc(100vh - 212px);

}

.content-left {
  height: calc(100vh - 212px);
  overflow: auto;
}

::v-deep .el-card__body {
  height: calc(100% - 76px);
  overflow: auto;
}

.el-tabs--border-card {
  box-shadow: none;
}
</style>
